const san = require('san/san')

const loadPath = __uri('/assets/imgs/load.gif')

const Full = san.defineComponent({
    template: `<div id="s-wait-load" class="s-wait-load">
                <template s-if="isShow">
                    <div class="wait-mask"></div>
                    <div class="wait-box">
                        <img class="s-wait-full-img" src="${loadPath}"/>
                    </div>
                </template>
            </div>`,
    initData() {
        return {
            isShow: false
        }
    }
})

const Part = san.defineComponent({
    template: `
        <div style="text-align: center;">
            <div class="s-wait-part" id="s-wait-part" s-if="isShow" >
                <img class="s-wait-part-img" src="${loadPath}" width="{{width}}" height="{{height}}" />
            </div>
        </div>
    `,
    initData() {
        return {
            isShow: false,
            width: 80,
            height: 80
        }
    }
})

const full = new Full()
const part = new Part()

const Wait = {
    part: null,
    partArr: [],
    fullShow() {
        if (!document.getElementById('s-wait-load')) {
            setTimeout(() => full.attach(document.body))
        }
        full.data.set('isShow', true, {force: true})
        return this
    },
    fullHide() {
        full.data.set('isShow', false, {force: true})
        return this
    },
    removeFull() {
        if (!document.getElementById('s-wait-load')) return
        full.data.set('isShow', false, {force: true})
        full.dispose && full.dispose()
    },
    partShow(box, width = 80, height = 80) {
        let dom = $(box)
        if (!dom[0]) return
        dom.css('position', 'relative')
        const part = new Part()
        Wait.partArr.push(part)
        part.attach(dom[0])
        part.data.set('width', width, {force: true})
        part.data.set('height', height, {force: true})
        part.data.set('isShow', true, {force: true})
        Wait.part = part
        return this
    },
    partHide() {
        let arr = Wait.partArr
        arr.map(p => {
            p.data && p.data.set('isShow', false, {force: true})
        })
        return this
    },
    removePart() {
        if (!Wait.part) return
        Wait.part.data && part.data.set('isShow', false, {force: true})
        Wait.part.dispose && Wait.part.dispose()
        Wait.part = null
        return this
    }
}

module.exports = Wait